import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, } from "antd";

import { actions } from "../../pages/todoList/store";
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
 function TodoModal({isModalVisible, showModal, updateAction, updataItem, }) {
     const [form] = Form.useForm();

    function handleOk() {  // 确定
        // console.log(form.getFieldValue())
        let newFormObj = form.getFieldValue()
        if(updataItem?.updata) {  // 更新时
            updateAction({...newFormObj, updata: true})
            showModal()
            // console.log("更新结束以后：：", updataItem)
        } else {
            // 添加时
            showModal({...newFormObj, add: true})
        }
    }

    function handleCancel() {  //  取消
        showModal()
    }

    useEffect(() => {
        // console.log("弹框组件，清空input 框 ------")
        if(updataItem?.updata) {
            // form.getFieldsValue()  setFieldsValue()
            // console.log("------------", updataItem)
            form.setFieldsValue({...updataItem})
        } else {
            // console.log("111111111111", updataItem)
            form.resetFields()
        }
    })

    function onFinishFailed() {}

    function onFinish() {}
  return (
    <div>
         <Modal title="添加" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            

         <Form
            form={form}
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{}}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            >
            <Form.Item
                label="名字"
                name="name"
                rules={[{ required: true, message: '请输入姓名' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="年龄"
                name="age"
                rules={[{ required: true, message: '请输入年龄' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="地址"
                name="address"
                rules={[{ required: true, message: '请输入地址' }]}
            >
                <Input />
            </Form.Item>

        </Form>

        </Modal>
    </div>
  )
}

export default connect(
    (state) => { return state },
    (dispatch) => { return bindActionCreators(actions, dispatch) }
)(TodoModal)
